<script>
import HeadAssembly from "@/components/headAssembly.vue";

export default {
  name: "refPage",
  components: {HeadAssembly},
  mounted(){
    console.log(document.getElementById('#box'));
    console.log(this.$refs)
    console.log(this.$refs.box)
    console.log(this.$refs.header)
    this.$refs.box.style.color = 'red'
    console.log(this.$refs.header.count)
  }
}
</script>

<template>
<!--  ref:用来获取DOM元素和组件
          在标签或者组件中加ref属性，使用时用this.$refs.ref的属性值
          获取子组件的数据和方法
-->
<div>
  <div id="box" ref="box">123455</div>
  <head-assembly ref="header">4567</head-assembly>
</div>
</template>

<style scoped lang="less">

</style>